<template>

  <!-- 筛选导航 -->
    <view>

		<!-- <text style="margin-left: 20rpx;">2023年3月28日</text> -->
       <view v-for="(item, index) in accordionItems" :key="index" class="accordion-item" v-if="accordionItems" >
            <view class="accordion-header">
				 <view class="" style="display: flex;">
				<view class=""  style="display: flex;flex-direction: column;">
					<text class="accordion-title" style="font-size: 40rpx;">{{ item.order_type == 'single'?'单次套餐':(item.order_type == 'monthly'?'包月套餐':'包年套餐') }}</text>
          <text>地址：{{item.address}}</text>
				</view>

			  </view>
			  <view  style="color:red" @click="jiedan(item)">
				  待接单
			  </view>

            </view>

          </view>
          <view class="" v-else>
            <p style="text-align: center;margin-top: 30%;">暂无数据</p>
          </view>
          <van-tabbar :active="active" @change="onChange">
          	<van-tabbar-item  @click="goSwitch('/pages/admin/index')">
              <image src="/static/tabs/home_selected.png" alt="admin" width="10px" />
              订单</van-tabbar-item>
          	<van-tabbar-item  @click="goSwitch('/pages/adminMe/index')">
               <image src="/static/tabs/user_default.png" alt="admin" width="10px" />
              我的</van-tabbar-item>
          </van-tabbar>
     </view>

 <!-- <view
      class="hpv-reserve"
      @click="toReserve(1)"
      >去预约</view> -->
  <!-- 高度 -->

  <!-- <u-calendar :show="calshow" mode="single" @confirm="confirm"></u-calendar> -->
</template>

<script setup lang="ts">
	import {reactive, ref,watch,toRef, toRefs} from 'vue'
	import { onLoad } from "@dcloudio/uni-app";

	import { onShow } from "@dcloudio/uni-app";
  import { log } from 'console';
  import { getpendingorders,acceptorder } from '@/services/login'
	// / 获取用户信息
	let user_data:any = ref({ avatarUrl: "", nickName: "",type:"",id:"" });

	let addad = ref()
	let leng = ref("")
  let active = ref(0)
	onShow(async() => {
	  let wxUser = uni.getStorageSync("wxuser") as {
	    avatarUrl: string;
	    username: string;
		type: any;
		id:any;
	  };
	  if (!wxUser) {
	    user_data.value.avatarUrl = "";
	    user_data.value.nickName = "";
		uni.navigateTo({
		  url: "/pages/login-page/index",
		});
	  } else {
	    user_data.value.type = wxUser.type;
	    user_data.value.nickName = wxUser.username;
		user_data.value.id = wxUser.id;
	  }
    const res:any = await getpendingorders()
    accordionItems.value = res.pending_orders
    console.log(res,'12312312');
	});
	let calshow = ref(true)
  uni.hideTabBar() //隐藏掉原始的tabbar
	let accordionItems = ref<any>(
 //  [
	// 	{
	// 	  image: 'http://120.46.87.212:8088/img/11.png',
	// 	  title: '9：00',
	// 	  yao: '六味地黄丸',
	// 	  expanded: false,
	// 	  isok: 1
	// 	},
	// 	{
	// 	  image: 'http://120.46.87.212:8088/img/11.png',
	// 	  title: '2：00',
	// 	   yao: '六味地黄丸',
	// 	  expanded: false,
	// 	   isok: 1
	// 	},
	// ]
  );
  async function jiedan(item:any){
     let wxUser = uni.getStorageSync("wxuser")
    console.log(item.order_id,'order_id');
    const data:any = await acceptorder({
      order_id:item.order_id,
      token:wxUser.token
    })
    uni.showToast({ title: "接单成功", icon: "none", duration: 1000 });

  }
	function confirm(e:any){
		console.log(e,'1111');
	}
  function onChange(e:any){
    active.value = e.detail
  }
	function open(){
		calshow.value = !calshow
	}
  function goSwitch(url:any){
    uni.switchTab({
    	url: url
    })
  }
	// export default {
	// 	data() {
	// 		return {
	// 		calshow:true,
 //             accordionItems: [
 //                     {
 //                       image: 'http://120.46.87.212:8088/img/11.png',
 //                       title: '9：00',
 //                       yao: '六味地黄丸',
 //                       expanded: false,
	// 				   isok: 0
 //                     },
 //                     {
 //                       image: 'http://120.46.87.212:8088/img/11.png',
 //                       title: '2：00',
 //                        yao: '六味地黄丸',
 //                       expanded: false,
	// 				    isok: 1
 //                     },

 //                   ],
	// 		}
	// 	},
	// 	methods:{
	// 		confirm(){

	// 		},
	// 		toReserve(v){
	// 			console.log(v);
	// 		},

	// 		 toggleAccordion(index) {
	// 		      this.$set(this.accordionItems, index, {
	// 		        ...this.accordionItems[index],
	// 		        expanded: !this.accordionItems[index].expanded,
	// 		      });
	// 		    },
	// 	}
	// }
</script>

<style  lang="scss">
	.addtip{
		margin-right: 20rpx;
		margin-top: 20rpx;
		justify-content: end;
		text-align: end;
		color: #f9a440;

	}
	.u-tag__text--medium{
		font-size: 10rpx;
	}
	 .accordion-item {
	       border: 1px solid #ddd;
	       padding: 20rpx;
	       margin: 31rpx;
		   border-radius: 30rpx	;
	 }

	 .accordion-header {
	   display: flex;
	   align-items: center;
	   justify-content: space-between;
	   padding: 10rpx;
	 }

	 .accordion-image {
	   width: 100rpx;
	   height: 100rpx;
	   margin-right: 40rpx;

	 }

	 .accordion-title {
	   flex: 1;
	 }

	 .accordion-content {
	   padding: 10rpx;
	   background-color: #f8f8f8;
	 }
	.yuyue{
		position: relative;
	}
	.yuyue image{
	  width: 100%;
	  display: block;
	  height: 550rpx;
	}
page {
  background-color: #fafafa;
}
.hpv-img {
  height: 350rpx;
}
.hpv-img image {
  height: 350rpx;
  width: 100%;
  display: block;
}
/* tab切换 */
.tab-view {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #ffffff;
}
.tab-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100rpx;
  justify-content: center;
  position: relative;
}
.checked {
  width: 50rpx;
  height: 8rpx;
  background-color: #0d7cff;
  position: absolute;
  bottom: 0;
}
/* 疫苗列表 */
.hpv-list {
  background-color: #ffffff;
  margin: 20rpx;
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  border-radius: 20rpx;
}
.hpv-type {
  font-size: 35rpx;
}
.hpv-age {
  display: flex;
  align-items: center;
}
.hpv-age text {
  background-color: #f4f6fa;
  padding: 7rpx;
  font-size: 25rpx;
  margin: 10rpx 10rpx 10rpx 0;
}
.hpv-price {
  font-weight: bold;
  color: #ff5f2c;
}
.hp-reserve {
  align-self: flex-end;
  background-color: #d4d4d4;
  padding: 15rpx 30rpx;
  border-radius: 40rpx;
  color: #000;
  width: max-content;
  margin-top: 20rpx;
}
.hpv-reserve {
  align-self: flex-end;
  background-color: #f9a440;
  padding: 15rpx 30rpx;
  border-radius: 40rpx;
  color: #ffffff;
  width: max-content;
  margin-top: 20rpx;
}
</style>
